<template>
  <div class="tbc-flex-col" style="align-items: center" :style="outerStyle">
    <div class="tbc-flex-col" :style="containerStyle">
      <div class="tbc-flex-row" style="flex-wrap: wrap;">
        <template v-for="(item, index) in module.data">
          <div class="tbc-flex-col" style="align-items:center;"
               :key="index" :style="itemStyle" v-if="index < max">
            <div class="tbc-flex-row" style="align-items: center;justify-content: center;background-color: #FEDBAB;"
                 :style="iconStyle">
              <img :src="item.icon" v-if="item.icon" :style="iconStyle"/>
            </div>
            <span :style="fontStyle">{{ item.label }}</span>
          </div>
        </template>
      </div>
      <!-- 指示器 -->
      <div v-if="showIndicator" style="background:#F30">
        <div class="tbc-flex-row" style="flex-direction:row;align-items: center;justify-content: center;">
          <div style="width:6px;height:6px;margin-left: 2px;margin-right: 2px;border-radius: 6px;transition: all .6s;"
               v-for="i in groupList.length"
               :key="i" :style="i === activeIndex + 1 ? activeBackground:'background-color: rgba(0, 0, 0, .4)'"></div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      outerStyle: '',
      containerStyle: '',
      itemStyle: '',
      iconStyle: '',
      fontStyle: '',
      module: {
        config: {
          outer: {},
          container: {},
          item: {},
          menu: {rowNumber: 5},
          font: {fontColor: ''}
        },
        data: []
      },
      max: 0,
      activeIndex: 0
    }
  },
  computed: {
    // 显示指示器
    showIndicator() {
      let config = this.module.config.indicator || {show: 0}
      return config.show
    },


    isPaging() {
      return 1;
      // return this.module.config.menu.paging || 0
    },

    activeBackground() {
      let config = this.module.config.indicator || {}
      return 'background-color: ' + config.activeBackground + ';width:12px' || 'background-color: #57CD5F;width:12px'
    },

    groupList() {
      let groupList = []
      let list = this.module.data
      let rowNumber = this.module.config.menu.rowNumber * 2
      for (let i = 0; i < list.length; i += rowNumber) {
        groupList.push(list.slice(i, i + rowNumber));
      }
      return groupList
    }
  },

  methods: {
    // 初始化
    init(module) {
      this.module = module
      this.max = module.config.menu.rowNumber * module.config.menu.rows
      this.setOuterStyle()
      this.setContainerStyle()
      this.setMenuIconStyle()
      this.setMenuFontStyle()
      this.setItemStyle()
    },

    // 设置外层容器样式
    setOuterStyle() {
      let style = []
      let config = this.module.config.outer || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.paddingTop) style.push('padding-top:' + config.paddingTop / 2 + 'px')

      if (config.paddingBottom) {
        let paddingBottom = config.paddingBottom
        // let menuPaddingBottom = this.module.config.menu.marginBottom || 0
        // paddingBottom -= menuPaddingBottom
        // console.log(paddingBottom)
        style.push('padding-bottom:' + paddingBottom / 2 + 'px')
      }
      if (config.background) style.push('background:' + config.background)
      this.outerStyle = style.join(';')
    },

    // 内层容器样式
    setContainerStyle() {
      let style = []
      let config = this.module.config.container || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.paddingTop) style.push('padding-top:' + config.paddingTop / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      if (config.radius) style.push('border-radius:' + config.radius / 2 + 'px')
      if (config.paddingTop) style.push('padding-top:' + config.paddingTop / 2 + 'px')
      if (config.paddingBottom) style.push('padding-bottom:' + config.paddingBottom / 2 + 'px')
      this.containerStyle = style.join(';')
    },


    setItemStyle() {
      let style = []
      let container = this.module.config.container
      let config = this.module.config.menu || {}
      config.width = container.width / config.rowNumber
      style.push('width:' + config.width / 2 + 'px')
      if (config.marginBottom) style.push('margin-bottom:' + config.marginBottom / 2 + 'px')
      this.itemStyle = style.join(';')
    },

    // 设置导航图标样式
    setMenuIconStyle() {
      let style = []
      let config = this.module.config.icon || {}
      style.push('width:' + config.size / 2 + 'px')
      style.push('height:' + config.size / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      if (config.marginBottom) style.push('margin-bottom:' + config.marginBottom / 2 + 'px')
      this.iconStyle = style.join(';')
    },

    // 设置导航字体样式
    setMenuFontStyle() {
      let style = []
      let config = this.module.config.font || {}
      style.push('font-size:' + config.fontSize / 2 + 'px')
      style.push('color:' + config.fontColor)
      if (config.marginTop) style.push('margin-top:' + config.marginTop / 2 + 'px')
      this.fontStyle = style.join(';')
    }
  }
}
</script>